import { useState, useMemo } from 'react';
import { Modal, Radio, Form } from 'antd';
import MemberSelect from '@inbiz/basic/MemberSelect';
import AutoInput from '../AutoInput';
import { observer } from '@formily/react';
import { TextWidget, getMessage } from '@inbiz/react';
import { countersign } from '../../../OutFunction';
const formLayout = {
  labelCol: {
    span: 5,
  },
  wrapperCol: {
    span: 16,
  },
};
const FormItem = Form.Item;
export default observer((props: any) => {
  const { visible, $visible, operationSuccess, taskId, inbiz, opinions, mySummary, isNewVersionDesigner } = props;
  const plusSignLogic = useMemo(() => {
    if (isNewVersionDesigner) {
      return inbiz?.workFlow?.buttonSetting?.plusSignLogic;
    } else {
      return inbiz?.workFlow?.plusSignLogic;
    }
  }, [isNewVersionDesigner, inbiz?.workFlow]);

  const [form] = Form.useForm();
  const [memberSelectVisible, $memberSelectVisible] = useState(false);
  const { getFieldsValue, setFieldsValue, resetFields } = form;
  const [members, $members] = useState([]);
  const confirm = () => {
    const value = getFieldsValue();
    countersign({
      members,
      value,
      inbiz,
      taskId,
      operationSuccess,
      resetFields,
      $visible,
      $members,
      opinions,
      mySummary,
    });
  };
  const resetMember = () => {
    $members([]);
    setFieldsValue({ assigenLists: '' });
  };
  return (
    <Modal
      visible={visible}
      title={
        plusSignLogic == 'skipCurrent'
          ? getMessage('processButton.fowardPlusSign')
          : plusSignLogic == 'skipNext'
            ? getMessage('processButton.backwardPlusSign')
            : getMessage('processButton.plussign')
      }
      onCancel={() => {
        resetFields();
        $visible(false);
        $members([]);
      }}
      onOk={confirm}
      destroyOnClose
      width={450}
    >
      <Form {...formLayout} form={form}>
        {plusSignLogic == 'customSkip' && (
          <FormItem
            name="plusSignType"
            label={getMessage('processButton.plussignOrder')}
            required
            initialValue="skipCurrent"
          >
            <Radio.Group>
              <Radio value="skipCurrent">
                <TextWidget>processButton.fowardPlusSign</TextWidget>
              </Radio>
              <Radio value="skipNext">
                <TextWidget>processButton.backwardPlusSign</TextWidget>
              </Radio>
            </Radio.Group>
          </FormItem>
        )}
        <FormItem
          name="assigenLists"
          label={getMessage('processButton.plussignPeople')}
          // onClick={() => $memberSelectVisible(true)}
          required
        >
          <AutoInput
            inbiz={inbiz}
            $selected={$members}
            selected={members}
            showArrow={true}
            reset={resetMember}
            disabled={false}
            showModal={() => $memberSelectVisible(true)}
          />
          {/* <Input
            placeholder="请选择"
            allowClear
            onChange={(e) => {
              if (!e.target.value) {
                $members([]);
                setFieldsValue({ assigenLists: '' });
              }
            }}
          /> */}
        </FormItem>
      </Form>
      <MemberSelect
        visible={memberSelectVisible}
        config={{
          pageSize: 10,
          multiple: true,
          tabs: ['user'],
          selected: members,
          onOk: (keys, selected, map) => {
            const arr = [...selected, ...members].reduce((item, next) => {
              const index = item.find((ele) => ele.id == next.id);
              if (!index) {
                item.push(next);
              }
              return item;
            }, []);

            setFieldsValue({ assigenLists: arr.map((item) => item.name).join(',') });
            $members(arr);
            $memberSelectVisible(false);
          },
          onCancel: () => {
            $memberSelectVisible(false);
          },
        }}
      />
    </Modal>
  );
});
